<template>
  <a-drawer
    title="新增美食"
    :maskClosable="false"
    width=650
    placement="right"
    :closable="false"
    @close="onClose"
    :visible="userAddVisiable"
    style="height: calc(100% - 55px);overflow: auto;padding-bottom: 53px;">
    <a-form :form="form">
      <a-form-item label='美食编号'
                   v-bind="formItemLayout"
                   :validateStatus="validateStatus"
                   :help="help">
        <a-input v-model="user.itemid"
                 @blur="handleUserNameBlur"
                 v-decorator="['itemid',{rules: [{ required: true, message: '编号不能为空'}]}]"/>
      </a-form-item>
      <a-form-item label='美食名称' v-bind="formItemLayout">
        <a-input v-model="user.itemName"/>
      </a-form-item>
      <a-form-item label='口味' v-bind="formItemLayout">
        <a-input
          v-model="user.remark"/>
      </a-form-item>
      <a-form-item label="图片" v-bind="formItemLayout">
        <a-upload
          name="avatar"
          listType="picture-card"
          class="avatar-uploader"
          :showUploadList="false"
          :beforeUpload="beforeUpload"
          :customRequest="customRequest"
        >
          <img width="200" v-if="user.image" :src="user.image" alt="avatar" />
          <div v-else>
            <a-icon :type="loading ? 'loading' : 'plus'" />
            <div class="ant-upload-text">Upload</div>
          </div>
        </a-upload>
      </a-form-item>
      <a-form-item label="状态" v-bind="formItemLayout">
        <a-input
          v-model="user.status"/>
      </a-form-item>
    </a-form>
    <div class="drawer-bootom-button">
      <a-popconfirm title="确定放弃编辑？" @confirm="onClose" okText="确定" cancelText="取消">
        <a-button style="margin-right: .8rem">取消</a-button>
      </a-popconfirm>
      <a-button @click="handleSubmit" type="primary" :loading="loading">提交</a-button>
    </div>
  </a-drawer>
</template>
<script>
  const formItemLayout = {
    labelCol: {span: 3},
    wrapperCol: {span: 18}
  }
  export default {
    name: 'UserAdd',
    props: {
      userAddVisiable: {
        default: false
      }
    },
    data() {
      return {
        user: {
          itemid: '',
          image: ''
        },
        loading: false,
        formItemLayout,
        form: this.$form.createForm(this),
        validateStatus: '',
        help: '',
        file: ''
      }
    },
    methods: {
      reset() {
        this.validateStatus = ''
        this.help = ''
        this.user.username = ''
        this.loading = false
        this.form.resetFields()
      },
      onClose() {
        this.reset()
        this.$emit('close')
      },
      beforeUpload: function (file) {
        console.log('-----beforeUpload------')
        this.file = file
        return true
      },
      customRequest () {
        console.log('-----------')
        const formData = new FormData()
        formData.append('file', this.file)
        this.$upload('item/upload', formData).then((r) => {
          console.log(r.data)
          this.user.image = r.data.data
          this.loading = false
          this.$message.success('上传成功！')
        }).catch((r) => {
          console.error(r)
          this.loading = false
          this.$message.error('上传失败！')
        })
      },
      handleSubmit() {
        if (this.validateStatus !== 'success') {
          this.handleUserNameBlur()
        }
        this.form.validateFields((err, values) => {
          if (!err && this.validateStatus === 'success') {
            this.loading = true
            this.$post('item', {
              ...this.user
            }).then((r) => {
              this.reset()
              this.$emit('success')
            }).catch(() => {
              this.loading = false
            })
          }
        })
      },
      handleUserNameBlur() {
        let itemid = this.user.itemid.trim()
        if (itemid.length) {
          this.$get(`item/check/${itemid}`).then((r) => {
            if (r.data) {
              this.validateStatus = 'success'
              this.help = ''
            } else {
              this.validateStatus = 'error'
              this.help = '抱歉，该编号已存在'
            }
          })
        } else {
          this.validateStatus = 'error'
          this.help = '美食编号不能为空'
        }
      }
    }
  }
</script>
